<template>
  <div :style="{ margin: '0 10%' }">
    <!-- 添加大标题 -->
    <h1 style="text-align: center; font-weight: bold;">渤海银行沈阳分行客户KYC信息登记卡</h1>
    <!-- 添加小标题 -->
    <h3 style="text-align: center;">金融产品覆盖情况</h3>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="106px"
               label-position="left">
        <el-col :span="24">
          <el-form-item label-width="130px" label="客户风险评估情况" prop="risk">
            <el-radio-group v-model="formData.risk" size="medium">
              <el-radio v-for="(item, index) in riskOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="130px" label="重点交叉产品" prop="keyProduct">
            <el-radio-group v-model="formData.keyProduct" size="medium">
              <el-radio v-for="(item, index) in keyProductOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="7">
              <el-form-item label-width="140px" label="在我行是否有贷款" prop="myLoan">
                <el-radio-group v-model="formData.myLoan" size="medium">
                  <el-radio v-for="(item, index) in myLoanOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label-width="80px" label="贷款原因" prop="myLoanReason">
                <el-radio-group v-model="formData.myLoanReason" size="medium">
                  <el-radio v-for="(item, index) in myLoanReasonOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="68px" label="其他贷款" prop="Otherloans">
                <el-input v-model="formData.Otherloans" placeholder="请输入其他贷款" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="7">
              <el-form-item label-width="140px" label="在他行是否有贷款" prop="otherLoan">
                <el-radio-group v-model="formData.otherLoan" size="medium">
                  <el-radio v-for="(item, index) in otherLoanOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label-width="80px" label="贷款原因" prop="otherLoanReason">
                <el-radio-group v-model="formData.otherLoanReason" size="medium">
                  <el-radio v-for="(item, index) in otherLoanReasonOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="68px" label="其他贷款" prop="otherloans">
                <el-input v-model="formData.otherloans" placeholder="请输入其他贷款" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="12">
              <el-form-item label-width="130px" label="信用卡张数（张）" prop="creditCardCount">
                <el-input-number v-model="formData.creditCardCount" placeholder="信用卡张数（张）"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="卡基类别" prop="creditCardType">
                <el-input v-model="formData.creditCardType" placeholder="请输入卡基类别" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="140px" label="主要在用他行卡情况" prop="situation">
                <el-input v-model="formData.situation" placeholder="请输入主要在用他行卡情况" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关注点" prop="focus">
                <el-input v-model="formData.focus" placeholder="请输入关注点" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="12">
              <el-form-item label="借记卡类别" prop="debitCardType">
                <el-radio-group v-model="formData.debitCardType" size="medium">
                  <el-radio v-for="(item, index) in debitCardTypeOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他" prop="debitCardother">
                <el-input v-model="formData.debitCardother" placeholder="请输入其他" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="他行卡主办行" prop="otherBank">
                <el-input v-model="formData.otherBank" placeholder="请输入他行卡主办行" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否借贷关联" prop="loanRelevant">
                <el-radio-group v-model="formData.loanRelevant" size="medium">
                  <el-radio v-for="(item, index) in loanRelevantOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="绑定情况" prop="bind">
                <el-radio-group v-model="formData.bind" size="medium">
                  <el-radio v-for="(item, index) in bindOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="140px" label="支付绑定银行卡机构" prop="bindInstitution">
                <el-input v-model="formData.bindInstitution" placeholder="请输入支付绑定银行卡机构" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item label="存款类型" prop="depositType">
            <el-radio-group v-model="formData.depositType" size="medium">
              <el-radio v-for="(item, index) in depositTypeOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="理财类型" prop="moneyManage">
            <el-radio-group v-model="formData.moneyManage" size="medium">
              <el-radio v-for="(item, index) in moneyManageOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="信托等其他代销产品" prop="trust">
            <el-radio-group v-model="formData.trust" size="medium">
              <el-radio v-for="(item, index) in trustOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="12">
              <el-form-item label="基金" prop="fund">
                <el-radio-group v-model="formData.fund" size="medium">
                  <el-radio v-for="(item, index) in fundOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他" prop="fundother">
                <el-input v-model="formData.fundother" placeholder="请输入其他" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="12">
              <el-form-item label="保险" prop="insurance">
                <el-radio-group v-model="formData.insurance" size="medium">
                  <el-radio v-for="(item, index) in insuranceOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他" prop="insuranceother">
                <el-input v-model="formData.insuranceother" placeholder="请输入其他" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="170px" label="已持有保险产品保险公司" prop="insuranceCompan">
                <el-input v-model="formData.insuranceCompan" placeholder="请输入已持有保险产品保险公司" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item label="贵金属" prop="nobleMetal">
            <el-radio-group v-model="formData.nobleMetal" size="medium">
              <el-radio v-for="(item, index) in nobleMetalOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="14">
              <el-form-item label="偏爱活动主题" prop="activity">
                <el-radio-group v-model="formData.activity" size="medium">
                  <el-radio v-for="(item, index) in activityOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="其他" prop="activityother">
                <el-input v-model="formData.activityother" placeholder="请输入其他" clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="productRemark">
            <el-input v-model="formData.productRemark" type="textarea" placeholder="请输入备注"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large" :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }">
            <el-button type="primary" @click="goTofourPage()">下一页</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  name:'threepage',
  components: {},
  props: [],
  data() {
    return {
      formData: {
        risk: undefined,
        keyProduct: undefined,
        myLoan: undefined,
        myLoanReason: 1,
        Otherloans: undefined,
        otherLoan: undefined,
        otherLoanReason: 1,
        otherloans: undefined,
        creditCardCount: undefined,
        creditCardType: undefined,
        situation: undefined,
        focus: undefined,
        debitCardType: 1,
        debitCardother: undefined,
        otherBank: undefined,
        loanRelevant: undefined,
        bind: undefined,
        bindInstitution: undefined,
        depositType: undefined,
        moneyManage: undefined,
        trust: undefined,
        fund: undefined,
        fundother: undefined,
        insurance: undefined,
        insuranceother: undefined,
        insuranceCompan: undefined,
        nobleMetal: undefined,
        activity: undefined,
        activityother: undefined,
        productRemark: undefined,
      },
      rules: {
        risk: [],
        keyProduct: [],
        myLoan: [],
        myLoanReason: [],
        Otherloans: [],
        otherLoan: [],
        otherLoanReason: [],
        otherloans: [],
        creditCardCount: [],
        creditCardType: [],
        situation: [],
        focus: [],
        debitCardType: [],
        debitCardother: [],
        otherBank: [],
        loanRelevant: [],
        bind: [],
        bindInstitution: [],
        depositType: [],
        moneyManage: [],
        trust: [],
        fund: [],
        fundother: [],
        insurance: [],
        insuranceother: [],
        insuranceCompan: [],
        nobleMetal: [],
        activity: [],
        activityother: [],
        productRemark: [],
      },
      riskOptions: [{
        "label": "R1保守型",
        "value": 1
      }, {
        "label": "R2稳健型",
        "value": 2
      }, {
        "label": "R3平衡型",
        "value": 3
      }, {
        "label": "R4成长型",
        "value": 4
      }, {
        "label": "R5进取型",
        "value": 5
      }],
      keyProductOptions: [{
        "label": "活期",
        "value": 1
      }, {
        "label": "定期",
        "value": 2
      }, {
        "label": "T+0",
        "value": 3
      }, {
        "label": " 理财",
        "value": 4
      }, {
        "label": "基金",
        "value": 5
      }, {
        "label": "保险",
        "value": 6
      }, {
        "label": "贵金属",
        "value": 7
      }, {
        "label": "手机银行",
        "value": 8
      }, {
        "label": "证书版网银",
        "value": 9
      }, {
        "label": "信用卡",
        "value": 10
      }, {
        "label": "个贷",
        "value": 11
      }, {
        "label": "三方存管",
        "value": 12
      }, {
        "label": "代发工资",
        "value": 13
      }, {
        "label": "其他",
        "value": 14
      }],
      myLoanOptions: [{
        "label": "无",
        "value": 1
      }, {
        "label": "有",
        "value": 2
      }],
      myLoanReasonOptions: [{
        "label": "一手房按揭",
        "value": 1
      }, {
        "label": "二手房按揭",
        "value": 2
      }, {
        "label": "房抵贷",
        "value": 3
      }, {
        "label": "公积金网贷",
        "value": 4
      }, {
        "label": "出国留学贷款",
        "value": 5
      }, {
        "label": " 其他贷款",
        "value": 6
      }],
      otherLoanOptions: [{
        "label": "无",
        "value": 1
      }, {
        "label": "有",
        "value": 2
      }],
      otherLoanReasonOptions: [{
        "label": "一手房按揭",
        "value": 1
      }, {
        "label": "二手房按揭",
        "value": 2
      }, {
        "label": "房抵贷",
        "value": 3
      }, {
        "label": "公积金网贷",
        "value": 4
      }, {
        "label": "出国留学贷款",
        "value": 5
      }, {
        "label": " 其他贷款",
        "value": 6
      }],
      debitCardTypeOptions: [{
        "label": "普卡",
        "value": 1
      }, {
        "label": "金卡",
        "value": 2
      }, {
        "label": "白金卡",
        "value": 3
      }, {
        "label": "钻石卡",
        "value": 4
      }, {
        "label": "其他",
        "value": 5
      }],
      loanRelevantOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      bindOptions: [{
        "label": "微信",
        "value": 1
      }, {
        "label": "支付宝",
        "value": 2
      }],
      depositTypeOptions: [{
        "label": "活期",
        "value": 1
      }, {
        "label": "定期",
        "value": 2
      }, {
        "label": "结构性",
        "value": 3
      }, {
        "label": " 其他",
        "value": 4
      }],
      moneyManageOptions: [{
        "label": "预期收益型",
        "value": 1
      }, {
        "label": "净值型",
        "value": 2
      }, {
        "label": " T+0理财",
        "value": 3
      }],
      trustOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      fundOptions: [{
        "label": "货币型",
        "value": 1
      }, {
        "label": "混合型",
        "value": 2
      }, {
        "label": "指数型",
        "value": 3
      }, {
        "label": "股票型",
        "value": 4
      }, {
        "label": "私募",
        "value": 5
      }, {
        "label": "其他",
        "value": 6
      }],
      insuranceOptions: [{
        "label": "期缴费型",
        "value": 1
      }, {
        "label": "泵缴型",
        "value": 2
      }, {
        "label": "年金型",
        "value": 3
      }, {
        "label": "分红型",
        "value": 4
      }, {
        "label": "重疾型",
        "value": 5
      }, {
        "label": "其他",
        "value": 6
      }],
      nobleMetalOptions: [{
        "label": "收藏类投资型",
        "value": 1
      }, {
        "label": "饰品型",
        "value": 2
      }],
      activityOptions: [{
        "label": "财富管理",
        "value": 1
      }, {
        "label": "亲子教育",
        "value": 2
      }, {
        "label": "健康管理",
        "value": 3
      }, {
        "label": "文艺活动",
        "value": 4
      }, {
        "label": "体育运动",
        "value": 5
      }, {
        "label": "升学留学",
        "value": 6
      }, {
        "label": "形象提升",
        "value": 7
      }, {
        "label": "专业咨询",
        "value": 8
      }, {
        "label": "其他",
        "value": 9
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    goTofourPage() {
      console.log(123)
      this.$router.push('/userinfo/fourpage');  // 跳转到名为fourpage 的路由
    }
  }
}

</script>
<style>
</style>
